<template>
  <div class="loadMore">
    <div class="leftLine" />
    <div class="centerText">
      <div v-if="(pages <= 1 || pageNum === pages) && !loadStatus">暂无更多数据</div>
      <div v-else @click="handleLoad">
        {{ loadStatus ? '加载中' : '查看更多' }}
        <i :class="loadStatus ? 'el-icon-loading' : 'el-icon-arrow-down'" style="font-size: 16px" />
      </div>
    </div>
    <div class="rightLine" />
  </div>
</template>

<script>
export default {
  props: {
    pageNum: {
      type: [Number, String],
      default: 0
    },
    pages: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      loadStatus: false
    }
  },
  methods: {
    handleLoad() {
      this.loadStatus = true
      const nextPage = this.pageNum + 1
      this.$emit('load', nextPage)
    }
  }
}
</script>

<style lang="scss">
.loadMore {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  .leftLine,
  .rightLine {
    flex: 1;
    height: 1px;
    background-color: #d4d4d4;
  }
  .centerText {
    flex-shrink: 0;
    font-size: 23px;
    cursor: pointer;
    color: #333;
    margin: 0 20px;
    display: flex;
    align-items: center;
  }
}
</style>
